@import '@/assets/styles/var';
// @import '@/assets/styles/common';

// 01.图文内容
.detail {
    // position: relative;
    display: flex;
    justify-content: center;
    // margin: 0 auto;
    padding: 0 10px;
    width: 100%;
    // margin: 0;
    padding: 0 10px;
    background-color: #fff;

    // 01.图文
    .article {
        position: relative;
        border-bottom: 1px solid #e5e9ef;
        margin-bottom: 20px;
        padding-top: 40px;
        // width: 820px;
        // width: calc(100% - 240px);
        max-width: 100%;
        background-color: #fff;
        padding: 10px 0;
        margin-bottom: 0;
        // 1.1 标题区
        .detail-title {
            margin-bottom: 20px;
            // padding: 0px 40px;
            border-bottom: 1px solid #e5e9ef;
            // padding: 0px 10px;
            h1 {
                margin-bottom: 28px;
                // min-height: 39px;
                font-size: $vtsize-h1;  // 24px;
                line-height: 1.25;
                font-weight: 600;
                // font-family: Helvetica, Verdana, Arial, sans-serif, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
                margin-bottom: 2px;
            }

            .info-box {
                // margin-bottom: 20px;
                // color: $vttextmute; // #999;
                // font-size: $vtsize-small;   // 14px;
                // margin: 10px 0px;

                span {
                    // margin-right: 10px;
                }
            }
        }

        // 1.2 内容区 穿透
        .detail-content {
            margin-bottom: 50px;
            padding: 0px 40px;
            margin-bottom: 10px;
            padding: 0px 15px;
            // font-family:Helvetica, Verdana, Arial, sans-serif, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
            // 引文段
            blockquote {
                color: #6d757a;
                padding-left: 20px;
                position: relative;

                p {
                    margin-bottom: 12px;
                }
            }
            // 引用
            blockquote:before {
                content: "";
                width: 15px;
                height: 15px;
                display: block;
                position: absolute;
                top: 4px;
                left: 0;
                background-image: url();
                background-size: 100% 100%;
            }
            // 标题及内容
            h2 {
                margin: 10px 0;
                // font-size: 22px !important;
                font-weight: 600 !important;
                font-size: 18px !important;
            }
            h2, h2 strong, h2 span {
                font-size: 18px !important;
                font-weight: 600 !important;
            }
            h3 {
                margin: 10px 0;
                // font-size: 18px !important;
                // font-weight: 600 !important;
                font-size: 16px !important;
            }
            h3, h3 strong, h3 span {
                font-size: 16px !important;
                // font-weight: 600 !important;
            }
            strong {
                font-weight: 600;
            }
            p, span {
                margin:5px 0;
                // font-size: 16px;
                // line-height: 26px;
                // cursor: text;
                font-size: 15px !important;
                line-height: 1.4 !important;

            }
            a {
                padding: 0 0 2px;
                border-bottom: 1px dashed #003abd;
                color: #333 !important;
                &:hover {
                    color: #003abd !important;
                    font-weight: 500;
                }
            }
            // 图片
            img {
                margin: 0 auto;
                max-width: 100% !important;
                height: auto;
                text-align: center !important;
                cursor: pointer;
            }
            // 列表
            // hr
            hr {
                margin: 20px 10px !important; 
                padding: 0px !important; 
                max-width: 100% !important; 
                overflow-wrap: break-word !important; 
                box-sizing: border-box !important; 
                border-style: solid !important; 
                border-right-width: 0px; 
                border-bottom-width: 0px; 
                border-left-width: 0px; 
                border-color: rgba(0, 0, 0, 0.2) !important; 
                transform-origin: 0px 0px; 
                transform: scale(1, 0.5);
            }
        }


    }

}
// 推荐内容
.recommend { 
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    // margin-bottom: 20px;
    // padding: 0 20px;
    width: 100%;
    // font-weight: 500;
    
    // padding: 16px 20px;
    // background-color: #fff;
    .content {
        padding: 20px 20px 0;
        // width: 820px;
        // font-size: 16px;
        font-weight: 500;
        // color: #333;
        margin-bottom: 20px;
        background-color: #fff;
        h4 {
            // padding: 20px 0 16px;
            padding-bottom: 16px;
            font-weight: 600;
            line-height: 30px;
            border-bottom: #e4e6eb 1px solid;
        }
        .list {
            .item {
                padding: 10px 4px;
                border-bottom: #e4e6eb 1px solid;
                .title {
                    font-size: $vtsize-p;   // 15px;
                    font-weight: 500;
                    // color: #333;
                    // margin-bottom: 20px;
                }
                .content {
                    font-size: 14px;
                    // color: #666;
                }
                &:last-child {
                    border-bottom: none;
                }
                &:hover { 
                    .title {
                        color: #1e80ff;
                        // background-color: #e4e6eb;
                        a {
                            color: $themeColor;

                        }
                    }
                }
            }
            // .item:last-child {
            //     border-bottom: none;
            // }
        }
    }
}